<template>
    <div class="company-user-list" v-show="isShow">
        <ul class="global-operation-list">
            <li class="global-operation-left">
                <ul class="global-filter-list">
                    <li class="global-filter-item">
                        <el-button type="primary" class="global-filter-item-search" @click="backShow">返回</el-button>
                    </li>
                    <li class="global-filter-item">
                        <el-button type="primary" class="global-filter-item-search" @click="rePosts">刷新</el-button>
                    </li>
                    <li class="global-filter-item">
                        <el-button type="primary" class="global-filter-item-search"
                        v-if="operationList.includes('add') && isOnly == 2" @click="add">添加</el-button>
                    </li>
                </ul>
            </li>
        </ul>
        <div class="global-table-content">
          <div class="global-table-content-a">
            <el-table 
              :data="dataList" style="width: 100%"
              v-loading="tableLoading"
            >
                <el-table-column prop="sysValueName" label="名称">
                </el-table-column>
                <el-table-column prop="desc" label="备注">
                    <template slot-scope="scope">
                      <div style="white-space: pre-wrap">
                        {{ scope.row.desc }}
                      </div>
                    </template>
                </el-table-column>
                <el-table-column prop="createDate" label="时间">
                </el-table-column>
                <el-table-column fixed="right" label="操作" width="100">
                    <template slot-scope="scope">
                      <div>
                        <el-button @click="handleClick(scope.row)" type="text" size="small">编辑</el-button>
                      </div>
                      <div v-if="operationList.includes('del')">
                        <el-button @click="handleDelClick(scope.row)" type="text" size="small">删除</el-button>
                      </div>
                      <div v-if="scope.row.isHaschild == 1">
                        <el-button @click="searchChild(scope.row)" type="text" size="small">查看下级</el-button>
                      </div>
                    </template>
                </el-table-column>
            </el-table>
            <div class="global-page">
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :page-sizes="pageSizes"
                    :page-size="pageSize" :current-page="pageNum" background layout="sizes, total, prev, pager, next"
                    :total="total">
                </el-pagination>
            </div>
          </div>
        </div>

        <el-dialog :title="dialogTitle" :visible.sync="dialogFormVisible">
          <el-form :model="form">
            <el-form-item label="值" :label-width="formLabelWidth">
              <el-input v-model="form.value" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="备注" :label-width="formLabelWidth">
              <el-input v-model="form.desc" autocomplete="off" type="textarea" :rows="2"></el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="submit">确 定</el-button>
          </div>
        </el-dialog>

    </div>
</template>

<script>
import API from "@/api/apiSysLabel";

export default {
    name: "SysLabelValue",
    props: {
        operationList: Array,
        isShow: Boolean,
        labelId: Number,
        isOnly: Number,
    },
    watch: {
        isShow(val){
            if(val){
                this.getPost()
            }
        },
    },
    data() {
        return {
            // 表格相关
            tableLoading: true,
            dataList: [],
            pageSize: 10,
            pageNum: 1,
            total: 0,
            pageSizes: [5, 10, 15, 20],
            tokenData: {
                token: "",
            },
            searchForm: {
                username: null,
            },
            dialogFormVisible: false,
            form: {
              value: '',
              desc: '',
              valueId: null,
            },
            formLabelWidth: '120px',
            dialogTitle: '新增',
            pId: 0,
        };
    },
    activated() {
        this.tokenData.token = this.$store.state.token;
    },
    mounted() {
        this.tokenData.token = this.$store.state.token
    },
    methods: {
      searchChild(row){
        this.pId = row.id
        this.$emit("choosePName", row.sysValueName)
        this.rePosts()
      },
      backShow(){
        if(this.pId && this.pId != 0){
          this.pId = 0
          this.$emit("chooseBackName")
          this.rePosts()
        }else{
          this.$emit('backShow')
        }
      },
      handleDelClick(item) {
        this.$confirm('此操作将删除该数据, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
        }).then(() => {
            const params = {
                sysLabelIds: item.id
            };
            API.doDelSysLabelValue(params).then((res) => {
                if (res.key === 1000) {
                    this.getPost()
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                }
            });
        }).catch((e) => {
            console.log(e)
            this.$message({
                type: 'info',
                message: '已取消删除'
            });
        });
      },
      handleClick(item) {
        this.dialogTitle = '编辑'
        this.form = {
          value: item.sysValueName,
          desc: item.desc,
          valueId: item.id,
        }
        this.dialogFormVisible = true
      },
      submit(){
        const params = {
          token: this.$store.state.token,
          sysValueName: this.form.value,
          sysLabelId: this.labelId,
        };
        if(this.form.desc){
          params.desc = this.form.desc
        }
        if(this.pId && this.pId != 0){
          params.showId = this.pId
        } else{
          if(this.labelId == 3){
            params.childFlag = 1
          }
        }
        if(this.form.valueId){
          params.valueId = this.form.valueId
          API.doEditSysLabelValue(params).then((res) => {
            if (res.key === 1000) {
              this.$message({
                message: '修改成功',
                type: 'success'
              });
              this.getPost()
              this.dialogFormVisible = false
            }
          });
        }else{
          API.doAddSysLabelValue(params).then((res) => {
            if (res.key === 1000) {
              this.$message({
                message: '添加成功',
                type: 'success'
              });
              this.getPost()
              this.dialogFormVisible = false
            }
          });
        }
      },
      add(){
        this.form = {
          value: '',
          desc: '',
          valueId: null,
        }
        this.dialogFormVisible = true
      },
      formatterTime(time) {
          return this.$moment(time).format("YYYY-MM-DD HH:mm:ss");
      },
      // 全局初始化
      init() {
          // 搜索条件重置
          this.searchForm = {
              username: null,
          };
          this.rePosts();
      },
      // 分页pageSize改变
      handleSizeChange(e) {
          this.pageSize = e;
          this.rePosts();
      },
      // 分页pageNum改变
      handleCurrentChange(e) {
          this.pageNum = e;
          this.getPost();
      },
      // 重新请求
      rePosts() {
          this.pageNum = 1;
          this.dataList = [];
          this.getPost();
      },
      // 表格列表
      getPost() {
          this.tableLoading = true;
          const params = {
              token: this.$store.state.token,
              pageNum: this.pageNum,
              pageSize: this.pageSize,
              sysLabelId: this.labelId,
          };
          if (this.pId && this.pId != 0){
            params.showId = this.pId
          }
          API.getSysLabelValueManageList(params).then((res) => {
              if (res.key === 1000) {
                  console.log("res", res)
                  res = res.result;
                  this.parentTotalNum = res.data
                  this.total = res.count;
                  res.list.forEach(item => {
                      if (item.createTime) {
                          item.createDate = this.formatterTime(item.createTime)
                      }
                  })
                  this.dataList = res.list;
                  this.tableLoading = false;
              }
          });
      },
    },
};
</script>

<style lang="sass">
.avatar-uploader
    .el-upload
      border: 1px dashed #d9d9d9
      border-radius: 6px
      cursor: pointer
      position: relative
      overflow: hidden
      &:hover
        border-color: #409eff
      .avatar-uploader-icon
        font-size: 28px
        color: #8c939d
        width: 100px
        height: 100px
        line-height: 100px !important
        text-align: center
      .avatar
        width: 100px
        height: 100px
        display: block
</style>
<style lang="sass" scoped>
.global-operation-list
  padding-left: 0
.global-select .global-select-btn
  background: #FFFFFF
.global-table-content
  padding: 0
  background-color: white
  width: 100%
.global-table-content-a
  margin: 0 auto
  width: 90%
  padding: 20px 0
.company-user-list
  //@include container
  .isStatus1
    width: 41px
    height: 21px
    background: #F1FFFC
    border-radius: 3px
    border: 1px solid #03C192
    font-size: 14px!important
    color: #03C192!important
    line-height: 21px
    text-align: center
  .isStatus2
    width: 41px
    height: 21px
    background: #FFF2F2
    border-radius: 3px
    border: 1px solid #F46565
    font-size: 14px!important
    color: #F44141!important
    line-height: 21px
    text-align: center
  .global-operation-left
    margin-right: 0
  ::v-deep .permission-dialog
    .el-dialog__body
      display: flex
      align-items: center
      flex-direction: column
      padding: 30px 60px
      .permission-dialog-tree
        width: 100%
        max-height: 450px
        overflow-y: auto
        overflow-x: hidden
        margin-bottom: 40px
  .global-table
    display: flex
    align-items: center
    justify-content: center
    flex-direction: column
    .list
      background: #FFFFFF
      box-shadow: 0px 0px 10px 0px rgba(93, 139, 198, 0.05)
      border-radius: 14px
      margin-bottom: 15px
      width: 100%
      display: flex
      align-items: center
      justify-content: space-between
      padding: 19px 24px
      .left
        display: flex
        align-items: center
        .img
          width: 90px
          height: 90px
          border-radius: 4px
          margin-right: 17px
        .nav
          .text1
            font-size: 20px
            font-weight: bold
            color: #222222
            line-height: 26px
            display: flex
            align-items: center
            justify-content: flex-start
            margin-bottom: 16px
            span
              height: 16px
              background: #FFF8ED
              border-radius: 11px
              border: 1px solid #FF9901
              font-size: 12px
              color: #FF9901
              line-height: 16px
              padding: 0 8px
              display: block
              text-align: center
              margin-left: 11px
          .text2
            display: flex
            align-items: center
            justify-content: flex-start
            margin-bottom: 25px
            i
              font-size: 20px
              color: #1861FD
              margin-right: 7px
            .text2_1
              font-size: 14px
              color: #222222
              line-height: 19px
              margin-right: 7px
            .text2_2
              margin-left: 5px
              font-size: 23px
              font-weight: bold
              color: #222222
              line-height: 29px
              margin-right: 3px
            .text2_3
              font-size: 14px
              color: #B5B5C3
              line-height: 19px
          .text3
            display: flex
            align-items: center
            i
              font-size: 14px
              color: #B5B5C3
              margin-right: 5px
            div
              font-size: 14px
              color: #B5B5C3
              line-height: 19px
              margin-right: 80px
      .right
//.permission-dialog-item
//  background: #f2f2f2

</style>
